import { createRouter, createWebHistory } from 'vue-router'
import { MiaoduoPage, SmartTileOverview, PressureHeatmapPage } from '../page'
import ApiTest from '../views/ApiTest.vue'
import RealTimeDataDemo from '../views/RealTimeDataDemo.vue'

// 路由配置
const routes = [
  {
    path: '/',
    name: 'Home',
    redirect: '/overview'
  },
  {
    path: '/api-test',
    name: 'ApiTest',
    component: ApiTest,
    meta: {
      title: 'API 接口测试',
      description: '测试智能瓷砖监控系统的 API 接口'
    }
  },
  {
    path: '/realtime-demo',
    name: 'RealTimeDataDemo',
    component: RealTimeDataDemo,
    meta: {
      title: '实时数据演示',
      description: '展示每秒变化的动态数据效果'
    }
  },
  {
    path: '/monitoring',
    name: 'Monitoring',
    component: MiaoduoPage,
    meta: {
      title: '智能瓷砖监控平台',
      description: '实时监控瓷砖压力数据，提供热图分析和异常检测'
    }
  },
  {
    path: '/monitoring/realtime',
    name: 'RealtimeData',
    component: MiaoduoPage,
    meta: {
      title: '实时数据监控',
      activeTab: 'realtime'
    }
  },
  {
    path: '/monitoring/history',
    name: 'HistoryData',
    component: MiaoduoPage,
    meta: {
      title: '历史数据分析',
      activeTab: 'history'
    }
  },
  {
    path: '/monitoring/trend',
    name: 'TrendAnalysis',
    component: MiaoduoPage,
    meta: {
      title: '趋势分析',
      activeTab: 'trend'
    }
  },
  {
    path: '/monitoring/heatmap',
    name: 'PressureHeatmap',
    component: MiaoduoPage,
    meta: {
      title: '压力热图',
      activeTab: 'heatmap'
    }
  },
  // 智能瓷砖概览页面（Vue版本）
  {
    path: '/overview',
    name: 'SmartTileOverview',
    component: SmartTileOverview,
    meta: {
      title: '智能瓷砖监控概览',
      description: '基于 miaoduo 设计的智能瓷砖监控概览页面',
      activeSection: 'dashboard'
    }
  },
  {
    path: '/overview/dashboard',
    name: 'OverviewDashboard',
    component: SmartTileOverview,
    meta: {
      title: '系统概况 - 智能瓷砖监控',
      activeSection: 'dashboard'
    }
  },
  {
    path: '/overview/realtime',
    name: 'OverviewRealtime',
    component: SmartTileOverview,
    meta: {
      title: '实时状态 - 智能瓷砖监控',
      activeSection: 'realtime'
    }
  },
  {
    path: '/overview/statistics',
    name: 'OverviewStatistics',
    component: SmartTileOverview,
    meta: {
      title: '异常统计 - 智能瓷砖监控',
      activeSection: 'statistics'
    }
  },
  {
    path: '/overview/history',
    name: 'OverviewHistory',
    component: SmartTileOverview,
    meta: {
      title: '历史回溯 - 智能瓷砖监控',
      activeSection: 'history'
    }
  },
  // 压力热图页面
  {
    path: '/pressure-heatmap',
    name: 'PressureHeatmapMain',
    component: PressureHeatmapPage,
    meta: {
      title: '压力热图 - 智能瓷砖监控',
      description: '基于 miaoduo 设计的压力热图监控页面'
    }
  },
  {
    path: '/data-monitoring',
    name: 'DataMonitoring',
    component: PressureHeatmapPage,
    redirect: '/data-monitoring/pressure-heatmap',
    meta: {
      title: '数据监控 - 智能瓷砖监控',
      description: '数据监控主页面'
    }
  },
  {
    path: '/data-monitoring/realtime',
    name: 'DataMonitoringRealtime',
    component: PressureHeatmapPage,
    meta: {
      title: '实时数据 - 数据监控',
      activeSection: 'realtime'
    }
  },
  {
    path: '/data-monitoring/history',
    name: 'DataMonitoringHistory',
    component: PressureHeatmapPage,
    meta: {
      title: '历史数据 - 数据监控',
      activeSection: 'history'
    }
  },
  {
    path: '/data-monitoring/trend',
    name: 'DataMonitoringTrend',
    component: PressureHeatmapPage,
    meta: {
      title: '趋势分析 - 数据监控',
      activeSection: 'trend'
    }
  },
  {
    path: '/data-monitoring/pressure-heatmap',
    name: 'DataMonitoringPressureHeatmap',
    component: PressureHeatmapPage,
    meta: {
      title: '压力热图 - 数据监控',
      activeSection: 'heatmap'
    }
  },
  // 智能瓷砖监控平台（HTML版本）
  {
    path: '/smart-monitoring',
    name: 'SmartTileMonitoring',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '智能瓷砖监控平台',
      description: '基于 miaoduo 设计的智能瓷砖监控平台'
    }
  },
  {
    path: '/smart-monitoring/overview',
    name: 'SmartMonitoringOverview',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '系统概况 - 智能瓷砖监控平台',
      activeSection: 'overview'
    }
  },
  {
    path: '/smart-monitoring/realtime-status',
    name: 'SmartMonitoringRealtimeStatus',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '实时状态 - 智能瓷砖监控平台',
      activeSection: 'realtime-status'
    }
  },
  {
    path: '/smart-monitoring/anomaly-stats',
    name: 'SmartMonitoringAnomalyStats',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '异常统计 - 智能瓷砖监控平台',
      activeSection: 'anomaly-stats'
    }
  },
  {
    path: '/smart-monitoring/history',
    name: 'SmartMonitoringHistory',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '历史回溯 - 智能瓷砖监控平台',
      activeSection: 'history'
    }
  },
  {
    path: '/smart-monitoring/data-monitoring',
    name: 'SmartMonitoringDataMonitoring',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '数据监控 - 智能瓷砖监控平台',
      activeSection: 'data-monitoring'
    }
  },
  {
    path: '/smart-monitoring/alert-management',
    name: 'SmartMonitoringAlertManagement',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '报警管理 - 智能瓷砖监控平台',
      activeSection: 'alert-management'
    }
  },
  {
    path: '/smart-monitoring/system-settings',
    name: 'SmartMonitoringSystemSettings',
    component: () => import('../views/SmartTileMonitoring.vue'),
    meta: {
      title: '系统设置 - 智能瓷砖监控平台',
      activeSection: 'system-settings'
    }
  },
  // 路由测试页面（仅开发环境）
  {
    path: '/route-test',
    name: 'RouteTest',
    component: () => import('../views/RouteTest.vue'),
    meta: {
      title: '路由测试',
      description: '测试所有路由配置'
    }
  },
  {
    path: '/pressure-heatmap-route-test',
    name: 'PressureHeatmapRouteTest',
    component: () => import('../views/PressureHeatmapRouteTest.vue'),
    meta: {
      title: '压力热图路由测试',
      description: '测试压力热图相关路由配置'
    }
  },
  // 404 页面
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  // 路由切换时滚动到顶部
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  if (to.meta.title) {
    document.title = `${to.meta.title} - AIcemeric`
  }
  
  // 页面加载动画已禁用
  // const app = document.getElementById('app')
  // if (app) {
  //   app.classList.add('page-loading')
  // }
  
  next()
})

// 全局后置钩子
router.afterEach((to) => {
  // 页面加载动画已禁用
  // setTimeout(() => {
  //   const app = document.getElementById('app')
  //   if (app) {
  //     app.classList.remove('page-loading')
  //   }
  // }, 100)
  
  // 发送页面访问统计
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('config', 'GA_MEASUREMENT_ID', {
      page_title: to.meta.title,
      page_location: window.location.href
    })
  }
})

export default router
